<template>
  <div>
    <h1 class="text-2xl font-bold text-gray-900 mb-6">仪表盘</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
            <i class="fa fa-cutlery text-blue-500 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">今日订单</p>
            <p class="text-2xl font-bold text-gray-900">128</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
            <i class="fa fa-money text-green-500 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">今日收入</p>
            <p class="text-2xl font-bold text-gray-900">¥8,642</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-full">
            <i class="fa fa-users text-yellow-500 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">活跃桌台</p>
            <p class="text-2xl font-bold text-gray-900">24</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-red-100 p-3 rounded-full">
            <i class="fa fa-clock-o text-red-500 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">平均服务时间</p>
            <p class="text-2xl font-bold text-gray-900">18分钟</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow-md p-6 lg:col-span-2">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">销售趋势</h2>
        <div class="h-80">
          <canvas ref="salesChart"></canvas>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">热门菜品</h2>
        <div class="space-y-4">
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
              <img src="https://picsum.photos/200/200?food=1" alt="宫保鸡丁" class="w-full h-full object-cover">
            </div>
            <div class="ml-3 flex-1">
              <p class="text-sm font-medium text-gray-900">宫保鸡丁</p>
              <p class="text-xs text-gray-500">已售出 128 份</p>
            </div>
            <div class="w-20 text-right">
              <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded-full">
                +12%
              </span>
            </div>
          </div>
          
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
              <img src="https://picsum.photos/200/200?food=2" alt="鱼香肉丝" class="w-full h-full object-cover">
            </div>
            <div class="ml-3 flex-1">
              <p class="text-sm font-medium text-gray-900">鱼香肉丝</p>
              <p class="text-xs text-gray-500">已售出 96 份</p>
            </div>
            <div class="w-20 text-right">
              <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded-full">
                +8%
              </span>
            </div>
          </div>
          
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
              <img src="https://picsum.photos/200/200?food=3" alt="糖醋排骨" class="w-full h-full object-cover">
            </div>
            <div class="ml-3 flex-1">
              <p class="text-sm font-medium text-gray-900">糖醋排骨</p>
              <p class="text-xs text-gray-500">已售出 72 份</p>
            </div>
            <div class="w-20 text-right">
              <span class="text-xs font-medium bg-red-100 text-red-800 px-2 py-1 rounded-full">
                -3%
              </span>
            </div>
          </div>
          
          <div class="flex items-center">
            <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
              <img src="https://picsum.photos/200/200?food=4" alt="麻婆豆腐" class="w-full h-full object-cover">
            </div>
            <div class="ml-3 flex-1">
              <p class="text-sm font-medium text-gray-900">麻婆豆腐</p>
              <p class="text-xs text-gray-500">已售出 64 份</p>
            </div>
            <div class="w-20 text-right">
              <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded-full">
                +5%
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Chart from 'chart.js/auto'

const salesChart = ref(null)

onMounted(() => {
  const ctx = salesChart.value.getContext('2d')
  
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [{
        label: '销售额',
        data: [1250, 1480, 1320, 1680, 1950, 2450, 2180],
        borderColor: '#3B82F6',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        tension: 0.3,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            callback: function(value) {
              return '¥' + value
            }
          }
        }
      }
    }
  })
})
</script>    